<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <include file="Public/meta"/>
    <style>
        tbody > tr > td {
            height: 86px;
            max-height: 100px;
        }

        .upload {
            position: relative;
            width: 240px;
            height: 85px;
            /*overflow: hidden;*/
        }

        .browerfile {
            position: absolute;
            top: 0;
            left: 0;
            width: 70px;
            height: 30px;
            opacity: 0;
        }

        .uploadSpan {
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            background: rgba(0, 0, 0, .5);
            color: #fff;
            text-align: center;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            float: left;
        }

        .img_center {
            /*width:120px;*/
            /*overflow: hidden;*/
            float: right;
        }

        .img_center img {
            display: block;
            height: 85px;
            width: 150px;
        }

        .bigImg {
            position: fixed;
            top: 100px;
            left: 50%;
            width: 300px;
            overflow: hidden;
            box-shadow: 0 0 10px #ccc;
        }

        .bigImg img {
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
<!--显示完整图片-->
<div class="bigImg">
    <img src="" alt="">
</div>


<div class="info-center">
    <!--顶部面包屑-->
    <div class="page-header">
        <div class="pull-left">
            <h4>首页中部客户案例-轮播图列表:</h4>
        </div>
        <a href="{:U('advertising/addcaseshow')}" class="btn btn-primary pull-right margin-top">添加轮播图</a>
    </div>

    <div class="clearfix"></div>
    <!--表格数据-->
    <div class="table-margin">
        <table class="table table-hover table-header" id="list-table">
            <thead>
            <tr>
                <td style="width: 100px;">编号</td>
                <td style="width: 180px;" align="center">客户姓名</td>
                <td style="width: 100px;" align="center">公司名称</td>
                <td style="width: 100px;" align="center">职位</td>
                <td style="width: 100px;" align="center">网址</td>
                <td style="width: 400px;" align="center">图片</td>
                <td style="width: 100px;" align="center">排序</td>
                <td align="center" class="w10">操作</td>
            </tr>
            </thead>
            <tbody>
            <foreach name="list" item="vo">
                <tr>
                    <td style="width: 100px;">{$vo['id']}</td>
                    <td style="width: 180px;" align="center">{$vo['name']}</td>
                    <td style="width: 180px;" align="center">{$vo['company']}</td>
                    <td style="width: 100px;" align="center">{$vo['profession']}</td>
                    <td style="width: 100px;" align="center">{$vo['website']}</td>
                    <td style="width: 350px;" align="center">
                        <div class="upload">
                            <form action="{:U('advertising/updateData')}" method="post" enctype="multipart/form-data"
                                  id="up_img_{$vo.id}">
                                <input type="hidden" name="id" value="{$vo.id}">
                                <span class="uploadSpan">上传</span>
                                <input type="file" class="browerfile"
                                       name="img"
                                       value=""
                                       id="{$vo.id}"
                                       onchange="upload_file_again('{$vo.id}',this)"
                                />
                                <div class="img_center">
                                    <img src="../../../uploads/{$vo['img']}" class="img1-img">
                                </div>
                            </form>
                        </div>
                    </td>

                    <td style="width: 100px;">
                        <input type="text"
                               onchange="updateSort('excellent_case','id','{$vo.id}','order',this)"
                               onkeyup="this.value=this.value.replace(/[^\d]/g,'')"
                               onpaste="this.value=this.value.replace(/[^\d]/g,'')"
                               size="4"
                               value="{$vo.order}"
                               class="form-control"
                               style="width:80px"/>
                    </td>
                    <td style="width: 100px;" align="center">
                        <a href="javascript:;"
                           adid="{$vo['id']}"
                           adname="{$vo['name']}"
                           adintroduce="{$vo['depict']}"
                           onclick="edit(this)">
                            编辑
                        </a>
                        <span class="text-explode">|</span>
                        <a href="javascript:if(confirm('确定删除？')) location ='{:U('advertising/deleteOneDate',array('id'=>$vo['id']))}'">删除</a>

                    </td>
                </tr>
            </foreach>
            </tbody>
        </table>
    </div>

</div>

<!--编辑时候显示编辑对话框-->
<div class="modal fade" id="bjy-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel"> 修改轮播</h4>
            </div>
            <div class="modal-body">
                <form id="bjy-form" class="form-horizontal" action="{:U('advertising/updateData')}" method="post">
                    <input type="hidden" name="id">
                    <input type="hidden" name="type">
                    <table class="table table-hover contact-template-form">
                        <tbody>
                        <tr>
                            <td width="20%" align="right">标题：</td>
                            <td>
                                <input class="form-control w-300" type="text" name="name">
                            </td>
                        </tr>
                        <tr>
                            <td width="20%" align="right">简介：</td>
                            <textarea name="introduce" cols="30" rows="4" class="form-control w-300">
                                    </textarea>
                        </tr>
                        <tr>
                            <th></th>
                            <td>
                                <input class="btn btn-primary" type="submit" value="确认">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="__ADMIN_JS__/common.js"></script>
<script>
    // 修改轮播
    function edit(obj) {
        var id = $(obj).attr('adid');
        var name = $(obj).attr('adname');
        var introduce = $(obj).attr('adintroduce');
        // 设置图片类型为1
        $("input[name='type']").val(1);

        $("input[name='id']").val(id);
        $("input[name='name']").val(name);
        $("textarea[name='introduce']").val(introduce);
        $('#bjy-edit').modal('show');
    }

    //鼠标移入缩略图 显示 完整图片
    $('.upload').each(function () {
        $(this).hover(function () {
            $('.bigImg').show();
            var imgsrc = $(this).find('.img_center>img').attr('src');
            $('.bigImg').find('img').attr('src', imgsrc);
        }, function () {
            $('.bigImg').hide();
        })
    })

    function upload_file_again(id, self) {
        var form = new FormData(document.getElementById('up_img_' + id));
        console.log(form);
        $.ajax({
            url: "{:U('advertising/upload_ajax')}",
            type: "post",
            data: form,
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data);
                var jsonData = JSON.parse(data);
                console.log(jsonData.state);
                if (jsonData.state == true) {
                    url = '../../../uploads/' + jsonData.url;
                    $(self).siblings('.img_center').find('img').attr('src', url);
                }
            },
            error: function (e) {
                alert("图片上传错误！！");
            }
        });
    }
</script>

</body>
</html>